<template>
    <tr-base-popup title="上传凭证" type="center" borderRadius="18rpx" ref="skyBasePopupRef">
        <view class="form-box">
            <view class="card-row">
                <view class="label">预定人姓名：</view>
                <view class="value">张三</view>
            </view>
            <view class="card-row">
                <view class="label">订单编号：</view>
                <view class="value">123456</view>
            </view>
            <uni-forms class="bang-form" ref="formRef" err-show-type="toast" :model="form" :rules="rules"
                       label-width="200rpx" label-position="top">
                <uni-forms-item label="实到人数" name="account">
                    <up-input placeholder="请输入实到人数"
                              type="number"
                            :disabled="disabled"
                            v-model="form.content"
                    ></up-input>
                </uni-forms-item>
                <uni-forms-item label="异常报备" name="content">
                    <uni-easyinput v-model="form.content" type="textarea" placeholder="请输入原因"
                                   :disabled="disabled"></uni-easyinput>
                    
                </uni-forms-item>
                <uni-forms-item label="上传图片/视频" name="content">
                    <qly-grid-images v-if="disabled" :imageList="images" height="180rpx"/>
                    
                    <qly-upload-multiple v-else v-model="form.images"/>
                </uni-forms-item>
            </uni-forms>
        </view>
        <template #footer>
            <up-button v-if="!disabled" type="primary" shape="circle" text="确 认"
                       @tap="qly.form.pass(confirm,formRef)"></up-button>
        </template>
    </tr-base-popup>
</template>
<script setup>

import {VouchersTypeEnum} from '@/enums/order'

const skyBasePopupRef = ref()

const formRef = ref()
const form = ref({
    count: 2,
    content: '',
    images: [],
})

const rules = {
    // 对name字段进行必填验证
    content: {
        // name 字段的校验规则
        rules: [
            // 校验 name 不能为空
            {
                required: true,
                errorMessage: $t('form.pleaseEnterYourAccount'),
            },
        ],
    },
}

const disabled = ref(false)
const images=['https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',
    'https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',
    'https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',
    'https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',
    'https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',
    'https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',
    'https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',
    'https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',
    'https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',
    'https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',
    'https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',
    'https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',
    'https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',
    'https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',
    'https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',
    'https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',
    'https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',
    'https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',
    'https://bangbang-java.oss-cn-hangzhou.aliyuncs.com/default/20250520/06834cf611304e0a8db51f9c521f9ef2.png',]

const open = (type, data) => {
    console.log('type',type)
    disabled.value = type === VouchersTypeEnum.view.value
    
    skyBasePopupRef.value.open()
}
const close = () => {
    skyBasePopupRef.value.close()
}

const confirm = () => {
    close()
}
defineExpose({
    open
})
</script>
<style scoped lang="scss">
.form-box {
    position: relative;
    z-index: 9;
    width: 80vw;
    
    .title {
        font-size: 32rpx;
        margin-bottom: 24rpx;
    }
}
</style>
